<template>
  <div class="users_content">
    <div class="card-container">
      <div class="header">
        <el-form
          ref="ruleForm"
          size="mini"
          class="demo-form-inline"
          label-width="100px"
          label-position="right"
        >
          <div class="row">
            <div class="col">
              <el-form-item label="父级菜单名称">
                <el-select
                  v-model="parent"
                  filterable
                  placeholder="请输入父级关键词"
                  :loading="loading"
                  @focus="getFoucus('first')"
                >
                  <el-option
                    v-for="item in fatherData"
                    :key="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col">
              <el-form-item label="子级菜单名称">
                <el-select
                  v-model="child"
                  filterable
                  placeholder="请输入子级关键词"
                  :loading="loading"
                  @focus="getFoucus(parent)"
                >
                  <el-option
                    v-for="item in childrenData"
                    :key="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="col"></div>
            <div class="col"></div>
            <div style="width:250px">
           
                <el-button
                  class="header-btn"
                  type="primary"
                  @click="onSubmit"
                  size="mini"
                >
                  <img
                    src="../../../assets/img/globalTable/icon1-search.png"
                    alt=""
                  />
                  查询</el-button>
           
              
                <el-button
                  class="header-btn"
                  type="primary"
                  @click="onCreate"
                  size="mini"
                >
                  <img
                    src="../../../assets/img/globalTable/icon3-add.png"
                    alt=""
                  />
                  新增</el-button>
            
              
                <el-button
                  class="header-btn"
                  @click="reset"
                  type="primary"
                  size="mini"
                >
                  <img
                    src="../../../assets/img/globalTable/icon2-reset.png"
                    alt=""
                  />重置</el-button>
              
            </div>
          </div>
        </el-form>
      </div>
      <el-card :body-style="{ height: '67vh' }">
        <el-table
          :data="dictionaryData"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          row-key="id"
          max-height="619"
          :height="tableHeight"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>
          <el-table-column
            prop="code"
            label="编码"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="{ row }">
              <div>
                <span
                  class="operate-btn"
                  type="primary"
                  @click="edit(row)"
                  size="small"
                  v-if="row.children"
                >编辑</span>
                <span
                  class="operate-btn"
                  type="danger"
                  @click="delbtn(row.id)"
                  size="small"
                >删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginationOptions.pageNo"
            :page-sizes="paginationOptions.pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
      <add-dictionary ref="AddDictionaryRef"></add-dictionary>
    </div>
  </div>
</template>
<script>
import AddDictionary from "@/views/sysmanage/dictionary/dialog/AddDictionary.vue";
import { manualPage, deleteDic } from "@/api/dictionary";
export default {
  components: {
    AddDictionary,
  },
  data () {
    return {
      parent: "",
      child: "",
      total: 0,
      // -----------------------
      fatherData: [],
      childrenData: [],
      value: [],
      loading: false,
      parentRowList: [],
      dictionaryData: [],
      paginationOptions: {
        pageNo: 1,
        pageSizes: [10, 20, 30, 50, 100],
        pageSize: 10,
        layout: "total, sizes, prev, pager, next, jumper",
      },
    };
  },
  computed: {
    tableHeight () {
      return this.$store.state.tableHeight - 440;
    }
  },
  mounted () {
    (this.parent = ""),
      (this.child = ""),
      (this.fatherData = []),
      (this.childrenData = []);
    this.onSubmit();
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      // console.log(row, rowIndex, !row.parentId);
      // const parentRowList = []
      if (!row.parentId && row.even) {
        return 'even-row'
      } else {
        return '';
      }
    },
    getFoucus (item) {
      if (item !== 'first') {
        this.remoteSec(item);
      } else {
        this.remoteFirst();
      }

      console.log("获取焦点");
    },
    remoteFirst (query) {
      // if (query !== "") {
      this.fatherData = [];
      this.loading = true;
      manualPage({
        records: [
          {
            childrenName: "",
            name: query,
          },
        ],
        current: 1,
        size: 1000000,
        // total: 10,
      }).then((res) => {
        if (res && res.code && res.code === "00000") {
          res.data.records.forEach((item) => {
            console.log(item);
            this.fatherData.push(item.name);
          });
          this.loading = false;
        }
      });
      // } else {
      //   this.fatherData = [];
      // }
    },
    remoteSec (query) {
      // if (query !== "") {
      this.childrenData = [];
      this.loading = true;
      manualPage({
        records: [
          {
            childrenName: "",
            name: query,
          },
        ],
        current: 1,
        size: 1000000,
      }).then((res) => {
        if (res && res.code && res.code === "00000") {
          res.data.records.forEach((item) => {
            if (item.children.length) {
              item.children.forEach((sitem) => {
                console.log(item.name, sitem.name);
                this.childrenData.push(`${sitem.name}`);
                this.childrenData = [...new Set(this.childrenData)];
              });
              // item.children.forEach((sitem) => {
              //   if (sitem.name.includes(query)) {
              //     console.log(item.name, sitem.name);
              //     this.childrenData.push(`${sitem.name}`);
              //     this.childrenData = [...new Set(this.childrenData)];
              //   }
              // });
            }
          });
          this.loading = false;
        }
      });
      // } else {
      //   this.childrenData = [];
      // }
    },

    onCreate () {
      this.$refs.AddDictionaryRef.openDialog();
    },
    onSubmit () {
      manualPage({
        records: [
          {
            childrenName: this.child,
            name: this.parent,
          },
        ],
        size: this.paginationOptions.pageSize,
        current: this.paginationOptions.pageNo,
      }).then((res) => {
        if (res && res.code && res.code === "00000") {
          console.log(res.data.records, this.child, "11111");
          // if (this.child) {
          //   res.data.records.forEach((item) => {
          //     item.children = item.children.filter((item) =>
          //       item.name.includes(this.child.split("-")[1])
          //     );
          //   });
          // }
          // this.total = Number(res.data.total);
          if (this.total == 0 && this.paginationOptions.pageNo > 1) {
            this.paginationOptions.pageNo--;
            this.onSubmit();
          } else {
            this.dictionaryData = res.data.records;
            for (let i = 0; i < this.dictionaryData.length / 2; i++) {
              this.dictionaryData[2 * i + 1].even = "true"
            }
            this.paginationOptions.total = res.data.total; // 分页器赋值
            this.paginationOptions.pageNo = res.data.current;
          }
          // this.dictionaryData.forEach(item=>{
          // item.updateTime=this.timeDeal(item.updateTime)
          // item.children.forEach(item=>item.updateTime=this.timeDeal(item.updateTime))
          // })
        }
      });
    },
    reset () {
      this.child = "";
      this.parent = "";
      this.onSubmit();
    },
    edit (row) {
      this.$refs.AddDictionaryRef.openDialog(row);
      console.log("edit", row);
    },
    delbtn (id) {
      this.$confirm("此操作将永久删除该字典, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("delbtn----", id);
          deleteDic(id).then((res) => {
            if (res && res.code && res.code === "00000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onSubmit();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange (val) {
      this.paginationOptions.pageNo = val;
      console.log("handleCurrentChange", this.paginationOptions.pageNo);
      this.onSubmit();
    },
    // 分页器 页容量变更行为
    handleSizeChange (val) {
      this.paginationOptions.pageSize = val;
      this.onSubmit();
    },
    timeDeal (timeString) {
      const date = new Date(timeString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hour = String(date.getHours()).padStart(2, "0");
      const minute = String(date.getMinutes()).padStart(2, "0");
      const second = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
};
</script>


<style lang="less" scoped>
::v-deep .el-col-9 {
  text-align: right;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}
::v-deep .el-table tr.even-row {
  background-color: rgba(28, 53, 78, 0.8) !important;
}
</style>
